<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('ikun')
const lastName = ref('MK2000')

// computed 只读写法 readonly
// const fullName = computed(() => {
//   return firstName + ' ' + lastName
// })

// computed 读写写法 可读可写 对象形式
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

</script>

<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <p>完整姓名</p>
  <input type="text" v-model="fullName">
</template>